<template>
  <div>
    <div>
      <p style="text-align: center">请选择需要上传的照片</p>
      <el-radio-group v-model="radio1" size="mini" class="radio_">
        <el-radio-button label="行驶证"></el-radio-button>
        <el-radio-button label="行驶证2"></el-radio-button>
        <el-radio-button label="合格证"></el-radio-button>
        <el-radio-button label="新车合照"></el-radio-button>
        <el-radio-button label="驾驶证"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="mupload">
      <el-upload
        :disabled="!this.re_"
        action="#"
        ref="upload_mimg_up"
        v-model="Mimg"
        list-type="picture-card"
        :on-preview="mimg_up"
        :on-remove="Re_mimg_up"
        :on-change="mimg_up_change"
        :auto-upload="false"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="Mimg" alt />
      </el-dialog>
      <p>warring:<br />一次仅能上传当前选择内容的图片！</p>
      <el-button @click="upOk">上传完成</el-button>
    </div>
  </div>
</template>

<script>
// import unit from "../../unit/unit.js";
export default {
  data() {
    return {
      Mimg: "",
      dialogVisible: false,
      re_: true,
      radio1: "行驶证",
    };
  },
  computed: {
    c() {
      return this.$store.state.img;
    },
  },
  created() {
    // console.log(unit.getCookie("url"));
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.Mimg = URL.createObjectURL(file.raw);
    },
    mimg_up(file) {
      this.Mimg = file.url;
      this.dialogVisible = true;
    },
    mimg_up_change(file, fileList) {
      this.Mimg = file.raw;
    },
    upOk() {
      // let imgName = "img";
      // switch (this.radio1) {
      //   case "行驶证":
      //     imgName = "img";
      //     break;
      //   case "行驶证2":
      //     imgName = "img_xszfm";
      //     break;
      //   case "合格证":
      //     imgName = "img_qs";
      //     break;
      //   case "新车合照":
      //     imgName = "img_new";
      //     break;
      //   case "驾驶证":
      //     imgName = "img_jsz";
      //     break;
      // }
      let formData = new FormData();
      formData.append("url", this.Mimg);
      formData.append("imgName", this.radio1);
      formData.append("a", 1);
      this.$axios({
        method: "POST",
        url: "/api/ed",
        data: formData,
      }).then((res) => {
        // console.log(res.data)
        if (res.data.status == 1) {
          this.$message({
            type: "success",
            message: "手机图片上传成功！",
          });
          this.$refs.upload_mimg_up.clearFiles();
          this.re_ = false;
          this.Mimg = "";
          setTimeout(() => {
            this.$router.go(0);
          }, 2000);
        }
      });
    },
    Re_mimg_up() {},
    re() {
      this.re_ = true;
    },
  },
};
</script>

<style>
.radio_ {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.mupload {
  width: 50%;
  height: 300px;
  /* background: red; */
  margin: 0 auto;
  text-align: center;
}
.mupload p {
  font-size: 19px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>